<template>
  <view class="message-type">
    <view class="m-content">
      <view class="m-item title">
        <view class="m-sn">订单编号：hkee2324434324234234234</view>
      </view>
      <view class="m-item">
        <text>消费会员</text>
        <text>徐洁</text>
      </view>
      <view class="m-item">
        <text>消费金额</text>
        <text>580元</text>
      </view>
      <view class="m-item">
        <text>消费时间</text>
        <text>2021-02-23 18:21:33</text>
      </view>
      <view class="m-item">
        <text>会员上级店主</text>
        <text>李嘉贤</text>
      </view>
      <view class="button">
        <view class="details" @tap="toConsumeDetail()">订单详情</view>
      </view>
    </view>
    <a-empty v-if="false" :src="'empty/order.png'|prefixOssUrl" :tips="['暂无相关信息']"></a-empty>
    <a-logo type="text"></a-logo>
  </view>
</template>

<script>
export default {
  data () {
    return {}
  },
  onLoad (options) {
    this.setNavigationBarTitle(options.type);
  },
  methods: {
    toConsumeDetail (id) {
      uni.navigateTo({
        url: `/subpackage/default/pages/message/_id?id=${id}`
      });
    },
    setNavigationBarTitle (type) {
      if (type === '1') {
        uni.setNavigationBarTitle({
          title: '非本店会员消费'
        });
      }
      if (type === '2') {
        uni.setNavigationBarTitle({
          title: '本店会员跨店消费'
        });
      }
    }
  }
};
</script>

<style lang="less">
page {
  background-color: #f7f7f7;

  .message-type {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .m-content {
      width: 660rpx;
      margin-top: 30rpx;
      padding: 20rpx;
      background: #ffffff;
      border-radius: 25rpx;

      .m-item {
        height: 50rpx;
        margin-bottom: 35rpx;
        display: flex;
        justify-content: space-between;
        font-size: 29rpx;
        color: #666666;
      }

      .title {
        margin-bottom: 55rpx;

        .m-sn {
          height: 40rpx;
          border-left: 8rpx solid #d61e85;
          padding-left: 10rpx;
          font-size: 30rpx;
          font-weight: bold;
          color: #000000;
        }
      }

      .button {
        height: 55rpx;
        display: flex;
        justify-content: flex-end;
        padding-top: 20rpx;
        border-top: 1rpx solid #f7f5f6;

        .details {
          width: 150rpx;
          height: 50rpx;
          background: #ffffff;
          border-radius: 30rpx;
          font-size: 27rpx;
          text-align: center;
          line-height: 50rpx;
          border: 1rpx solid #db187c;
          color: #db187c;
        }
      }
    }
  }
}
</style>
